<template>
  <div class="pageWrapper">
    <searchForm></searchForm>
    <!-- 二次封装的table组件 -->
    <tablePaganations
      :Table="tableValues"
      :column="columns"
      :isSelect="isSelect"
      @changePage="changePage"
      @batch="batch"
    >
      <template #bodyCell="{ scope }">
        <span v-if="scope.column.key != 'action'">{{
          (scope.column.da, scope.value)
        }}</span>
        <span v-else>
          <a-button type="primary">编辑</a-button>
          <a-divider type="vertical" />
          <a-button>删除</a-button>
        </span>
      </template>
    </tablePaganations>
  </div>
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import tablePaganations from "@/components/ctTable.vue";
import searchForm from "@/components/ctSearchForm.vue";
let tableValues: Ref<any> = ref([]);
const columns = ref([
  {
    title: "序号",
    dataIndex: "name",
    type: "serial",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
  },
  {
    title: "性别",
    dataIndex: "sex",
  },
  {
    title: "数量",
    dataIndex: "score",
    type: "number",
  },
  {
    title: "占比",
    dataIndex: "percent",
    type: "percent",
  },
  {
    title: "费用",
    dataIndex: "price",
    type: "money",
  },
  {
    title: "标签",
    dataIndex: "tags",
  },
  // {
  //   title: "操作",
  //   dataIndex: "operation",
  //   buttons: [
  //     {
  //       name: "查看",
  //       onclick: ({ record }) => {
  //         console.log("查看", record);
  //       },
  //       show: ({ record }) => record.name === "诸葛亮4",
  //     },
  //     {
  //       name: "编辑",
  //       onclick: ({ record }) => {
  //         console.log("编辑", record);
  //       },
  //     },
  //     {
  //       name: "删除",
  //       onclick: ({ record }) => {
  //         console.log("删除", record);
  //       },
  //       style: {
  //         color: "red",
  //       },
  //     },
  //   ],
  // },
]);
const renderArr = ref([
  {
    title: 1,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 2,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 3,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 4,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 5,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 6,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 7,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 8,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 9,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 10,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 11,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
  {
    title: 12,
    name: "zhangsan",
    age: 18,
    sex: "男",
    number: 99,
    percent: 77,
    money: 199,
    tags: "技术",
  },
]);
const isSelect = ref<boolean>(true);
const changePage = (val: boolean) => {
  //分页器改变返回值
  console.log("changePage", val);
};
const batch = (val: any) => {
  //多选改变返回值
  console.log("batch", val);
};

tableValues.value = renderArr.value;
// console.log(tableValues.value);
</script>
<style lang="scss" scoped>

</style>
